<template>
  <footer class="footer">
    <div class="footer-top">
      <div class="back-to-top" @click="scrollToTop">
        {{ $t('返回页首') }}
      </div>
    </div>

    <div class="footer-main">
      <div class="footer-content">
        <div class="footer-section">
          <h3>{{ $t('了解我们') }}</h3>
          <ul>
            <li><router-link to="/about-coupons">{{ $t('关于优惠卷') }}</router-link></li>
<!--            <li><a href="#">{{ $t('投资者关系') }}</a></li>-->
<!--            <li><a href="#">{{ $t('亚马逊设备') }}</a></li>-->
<!--            <li><a href="#">{{ $t('亚马逊科学') }}</a></li>-->
          </ul>
        </div>

        <div class="footer-section">
          <h3>{{ $t('合作信息') }}</h3>
          <ul>
            <li><router-link to="/register">{{ $t('加入我们') }}</router-link></li>
            <!-- <li><a @click="promoteFriends" style="cursor: pointer">{{ $t('推广好友') }}</a></li> -->
<!--            <li><a href="#">{{ $t('自行出版') }}</a></li>-->
          </ul>
        </div>

        <div class="footer-section">
          <h3>{{ $t('支付服务') }}</h3>
          <ul>
            <li><a @click.prevent="handleMenuClick('/account')">{{ $t('您的账户') }}</a></li>
<!--            <li><a href="#">{{ $t('配送费用与政策') }}</a></li>-->
            <li><a @click.prevent="handleMenuClick('/account/orders')">{{ $t('退货与换货') }}</a></li>
<!--            <li><a href="#">{{ $t('亚马逊助手') }}</a></li>-->
            <li><a @click.prevent="handleMenuClick('/account/customer-service')">{{ $t('帮助中心') }}</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>{{ $t('协议') }}</h3>
          <ul>
            <li><router-link to="/protocol?key=settlementContract">{{ $t('入驻协议') }}</router-link></li>
            <li><router-link to="/protocol?key=userContract">{{ $t('用户协议') }}</router-link></li>
            <li><router-link to="/protocol?key=secrecyContract">{{ $t('隐私协议') }}</router-link></li>
            <li><router-link to="/protocol?key=agentContract">{{ $t('创业联盟协议') }}</router-link></li>
          </ul>
        </div>
      </div>

      <div class="footer-divider"></div>

      <div class="footer-secondary">
        <div class="nav-logo">
          <a href="/" class="nav-logo-link" aria-label="Amazon">
            <img src="@/assets/images/Amazon_logo.svg" alt="Amazon" class="amazon-logo" />
          </a>
        </div>
<!--        <div class="footer-selectors">-->
<!--          <div class="currency-selector">-->
<!--            <select>-->
<!--              <option value="USD">USD - {{ $t('美元') }}</option>-->
<!--              <option value="CNY">CNY - {{ $t('人民币') }}</option>-->
<!--            </select>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>

    <div class="footer-bottom">
      <div class="copyright">
        {{ $t('© 1996-2025, Amazon.com, Inc. 或其附属公司') }}
      </div>
    </div>
  </footer>
</template>

<script setup>
import useUserStore from "@/store/modules/user.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
const { t } = useI18n();

const router = useRouter()
const userStore = useUserStore()

const handleMenuClick = (path) => {
  if (!userStore.isLogin) {
    router.push('/login')
  } else {
    router.push(path)
  }
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
const promoteFriends = () => {
  if (!userStore.isLogin) {
    ElMessage.warning(t('请先登录'))
    return
  }
  const url = `https://tw-coinget.com/#/register?inviteCode=${userStore.userInfo.member.inviteCode}`
  ElMessageBox.alert(url, t('推广好友链接'), {
    confirmButtonText: t('复制'),
    callback: async () => {
      await navigator.clipboard.writeText(url);
      ElMessage.success(t('复制成功'))
    },
  })
}
</script>

<style lang="scss" scoped>
.footer {
  background-color: #232f3e;
  color: #fff;

  .footer-top {
    background-color: #37475A;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;

    &:hover {
      background-color: #485769;
    }
  }

  .footer-main {
    padding: 40px 0;
    background-color: #232f3e;

    .footer-content {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 0 20px;
    }

    .footer-section {
      h3 {
        color: #fff;
        font-size: 16px;
        margin-bottom: 14px;
        font-weight: 700;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          margin-bottom: 10px;
          cursor: pointer;
          a {
            color: #ddd;
            text-decoration: none;
            font-size: 14px;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .footer-divider {
      border-top: 1px solid #3a4553;
      margin: 40px 0;
    }

    .footer-secondary {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      padding: 0 20px;

      .nav-logo {
        .nav-logo-link {
          display: flex;
          align-items: center;
          padding: 1px 8px 0 8px;
          border: 1px solid transparent;
          text-decoration: none;
          height: 50px;
          margin-right: 4px;

          &:hover {
            border-color: #fff;
          }
        }

        .amazon-logo {
          width: 97px;
          height: 30px;
          object-fit: contain;

        }
      }

      .footer-selectors {
        display: flex;
        gap: 20px;
        align-items: center;

        .currency-selector {
          select {
            background: transparent;
            color: #fff;
            border: 1px solid #666;
            padding: 4px 10px;
            border-radius: 3px;
            min-width: 120px;
            height: 32px;
            box-sizing: border-box;

            option {
              background: #232f3e;
            }

            &:hover {
              border-color: #fff;
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    background-color: #131A22;
    padding: 30px 0;
    text-align: center;

    .copyright {
      color: #999;
      font-size: 12px;
    }
  }
}

@media (max-width: 768px) {
  .footer {
    .footer-main {
      .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .footer-secondary {
        flex-direction: column;
        gap: 20px;

        .footer-selectors {
          flex-direction: column;
          gap: 10px;

          select {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
